<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #F4F4F4;
        }
       .title{
        display: flex;
        justify-content: space-between;
        height: 50px;
        align-items: center;
        padding:  0px 20px;
        font-weight: bold;
       }
       .item{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: bold;
       }
       .item img{
        width: 80px;
        height: 80px;
        border-radius: 10px;
        margin-right: 10px;
       }
       .item .name{
        margin-bottom: 10px;
       }
       .item .right{
        display: flex;
        align-items: center;
       }
       .item button{
       width: 50px;
       height: 30px;
       border-radius: 10px;
       background-color: #FF3F00;
       color: white;
       border: 0;
       }
      
       .item .middle{
        width: 155px;
       }
       .bottom{
        width: 100%;
        position: absolute;
        bottom: 0%;
        color: black;
        background-color: #FFFFFF;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
       }
       
      .list{
        padding:  0px 20px;
        
        background-color: white;
      }
      .top{
       margin: 10px 0;
       font-weight: bold;
      }
       .bottom div{
        margin-top: 10px;
        height: 100%;
        width: 200px;
       }
       .bottom button{
        width: 100px;
        height: 40px;
       background-color: #00FF26;
       color: white;
       }
       .pirce{
        color: red
       }
       .hb{
        width: 100%;
        height: 100%;
        padding:  0px 20px;
        background-color: white;
       }
       .center{
        display: flex;
        justify-content: space-between;
       }
       .center div{
        border-radius: 8px;
        text-align: center;
        line-height: 53px;
        width: 90px;
        height: 100px;
        background-color: #FFE4E0;
        color: red;
       }
    </style>
</head>

<body>
    <!-- 由于Vue的实例挂载在id为app的DOM节点上,所以Vue实例对象上的数据和方法就可以在
    挂载的DOM节点上使用 -->
    <div id="app">
        <div class="title">
            <p><饿了么</p>
        </div>
        <div class="list">
            <div class="top">热门单品</div>
            <!-- 用data中的数据,渲染出多个任务,最终形成列表 -->
            <!-- 列表渲染,使用Vuejs的指令  v-for,也可以配合key属性一起使用 -->
            <!-- 列表渲染基本语法: v-for="(item,index) in datalist" key="index" -->
            <div class="item" v-for="(item,index) in datalist" v-bind:key="index">
                <div class="left">
                    <!-- 当属性值中需要计算或放置变量时,属性名称前必须有v-bind: -->
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <!-- {{ 表达式 或者 变量 }}插值表达式(双大括号)会解析/计算表达式的值,只能用在标签内容区 -->
                    <div class="name">{{item.name}}</div>
                    <div class="pirce">{{item.pirce}}</div>
                </div>
                <div class="right">
               <button>立即兑</button>
                </div>
            </div>
            
        </div>
        <div class="hb">
            <div class="head" style="margin: 10px 0px ;">通用红包限量兑</div>
            <div class="center">
                <div>
                    <p style="font-size: 23px;">￥5</p>
                    <p style="font-size: 12px;">满30可用</p>
                </div>
                <div>
                    <p style="font-size: 23px;">￥5</p>
                    <p style="font-size: 12px;">满30可用</p>
                </div>
                <div>
                    <p style="font-size: 23px;">￥8</p>
                    <p style="font-size: 12px;">满30可用</p>
                </div>
               
            </div>
            <div class="foot">
                <p></p>
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="bottom">
            <p>首页</p>
            <p>吃货卡</p>
            <p>订单</p>
            <p>我的</p>
         </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#app', //Vue挂载的节点
        data: {
            datalist: [
                { id: 1, pic:'https://img2.baidu.com/it/u=2381406616,1387152679&fm=253&fmt=auto&app=120&f=JPEG?w=860&h=573', name: '脐橙3斤快递到家', pirce: '10' },
                { id: 2, pic:'https://img2.baidu.com/it/u=2381406616,1387152679&fm=253&fmt=auto&app=120&f=JPEG?w=860&h=573',name: '耙耙柑2斤快递到家', pirce:  '30' },
                { id: 3,pic:'https://img2.baidu.com/it/u=2381406616,1387152679&fm=253&fmt=auto&app=120&f=JPEG?w=860&h=573', name: '鲜活皮皮虾/斤',  pirce:  '60' }
            ]
        },   //定义的响应式数据,data可以是一个对象也可以是一个函数
        //data：function(){return {}}
        computed: {},//定义计算属性
        watch: {},   //定义数据监听
        methods: {}, //定义方法(函数)
        filters: {}, //定义过滤器
        directives: {},//定义自定义指令
        components: {},//注册局部组件
    })
</script>